<template>
  <div class="task">
    <div class="task-unit">
      <header>用户管理</header>
      {{ state }}
    </div>
    <div class="task-unit">
      <header>用户管理</header>
      {{ state }}
    </div>

    <div class="task-unit">
      <header>用户管理</header>
      {{ state }}
    </div>
    <div class="task-unit">
      <header>用户管理</header>
      {{ state }}
    </div>
  </div>
</template>

<script>
import { reactive, toRefs } from "vue";

export default {
  setup() {
    const state = reactive({
      menus: [],
    });
    return {
      ...toRefs(state),
    };
  },

  name: "TaskPage",

  components: {},

  props: {
    msg: String,
  },
};
</script>

<style scoped>
.task {
  background-color: rgba(255, 255, 255, 0.2);
  /* height: 100vh; */
  width: 100vw;
  /* filter: blur(20px); */
  display: flex;
  flex-wrap: wrap;
  overflow-y: auto;
}

.task-unit {
  border: 1px #fff solid;

  width: 40vw;
  height: 40vh;
  margin: 4.5vw;
}
</style>
 